<template>
	<view style="height: 100vh;background-color: #F9F9F9;">
		<!-- 新增的下拉框区域 -->
		<view class="filter-container">
			<view class="filter-select" @click="showType">
				<text style="margin-left: 40%;">{{ currentTypeName }}</text>
				<image 
					src="../../../static/images/down.png" 
					class="arrow-icon"
					:style="{ transform: showTypeSelect ? 'rotate(180deg)' : '' }"
				></image>
			</view>
			
			<!-- 下拉选项列表 -->
			<view class="type-options" v-if="showTypeSelect">
				<view 
					class="option-item" 
					v-for="typ in typeList"
					:key="typ.value"
					@click="handleTypeChange(typ)"
				>
					<text style="margin-left: 40%;">{{ typ.name }}</text>
				</view>
			</view>
		</view>
		
		<view class="Arrary">
			<view class="Arrary_center" v-for="bill in filteredBillList">
				<view style=" padding: 20rpx;">
					<text style="font-size: 14px;">{{ bill.month }}</text>
				</view>
				<view class="wode-last-text" v-for="item in bill.billList">
					<view class="image_4_border">
						<image class="image_4" src="../../../static/images/balance.png"></image>
					</view>
					<view class="wode-last-text2">
							<text v-if="item.type==1">直推收益</text>
							<text v-if="item.type==2">见单收益</text>
							<text v-if="item.type==3">团队收益</text>
							<text v-if="item.type==4">平级帮扶奖</text>
							<text v-if="item.type==5">代理收益</text>
							<text v-if="item.type==6">股东收益</text>
							<text v-if="item.createTime" style="color:#bbbbbb">{{ item.createTime }}</text>
							<text v-if="item.integral>=0" style="color: green;font-weight: bold;">{{ item.integral }}</text>
							<text v-if="item.integral<0" style="color: red;font-weight: bold;">{{ item.integral }}</text>
					</view>
				</view>
			</view>
			<view v-if="filteredBillList.length==0 " style="text-align: center;padding-top: 50px;">
				<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/png/empty_data.png"></image>
				<view style="color:#b1b5b5">没有符合条件的收益记录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { benefitList } from '@/api/user.js';
	import { USER_INFO, UID } from '@/config/cache';
	import Cache from '@/utils/cache';
	
	export default {
		data() {
			return {
				UserfindIntegralBill:[],
				findIntegralBillList:[],
				userInfo:null,
				billList:null, // 原始的所有数据
				filteredBillList:null, // 筛选后的数据
				uid:0,
				demoData:[
					{
						createTime:"2025-07-10 21:12:55",
						integral:"112.11",
						type:2
					},
					{
						createTime:"2025-07-10 21:12:55",
						integral:"112.11",
						type:2
					},
					{
						createTime:"2025-07-10 21:12:55",
						integral:"-112.11",
						type:1
					},
					{
						createTime:"2025-06-10 21:12:55",
						integral:"112.11",
						type:1
					},
					{
						createTime:"2025-06-10 21:12:55",
						integral:"-112.11",
						type:1
					}
				],
				
				// 新增的类型筛选相关数据
				showTypeSelect: false, // 控制下拉框显示/隐藏
				selectedTypeId: 0, // 选中的类型ID，0表示全部
				typeList: [
					{ value: 0, name: '全部收益' },
					{ value: 1, name: '直推收益' },
					{ value: 2, name: '见单收益' },
					{ value: 3, name: '团队收益' },
					{ value: 4, name: '平级帮扶奖' },
					{ value: 5, name: '代理收益' },
					{ value: 6, name: '股东收益' }
				]
			}
		},
		
		computed: {
			// 获取当前选中的类型名称
			currentTypeName() {
				const type = this.typeList.find(item => item.value === this.selectedTypeId);
				return type ? type.name : '全部收益';
			}
		},
		
		
		methods: {
			showType() {
				this.showTypeSelect = !this.showTypeSelect
			},
			getfindIntegralBill(){
				const that = this
				// 这里可以保留原有的API调用，这里用demoData做示例
				benefitList().then(res=>{
					console.log(res);
					that.UserfindIntegralBill = res.data
					that.getIntegralDate(res.data)
				})
				
				// 使用demo数据
				// this.UserfindIntegralBill = this.demoData;
				// this.getIntegralDate(this.UserfindIntegralBill);
			},
			
			getIntegralDate(integralBill){
				let dataList=[]
				let integrallBill=[]
				let month
				
				for(var i=0;i<integralBill.length;i++){
					var subMonth = integralBill[i].createTime.substring(0,7)
					
					if(i==0){
						month =  subMonth
						integrallBill.push(integralBill[i])
					}
					
					if(i>0){
						var subMonth1 = integralBill[i-1].createTime.substring(0,7)
						if(subMonth==subMonth1){
							integrallBill.push(integralBill[i])
						}else{
							dataList.push({
								month: month,
								billList: integrallBill
							})
							integrallBill=[]
							integrallBill.push(integralBill[i])
							month =  subMonth
						}
					}
					
					if(i==integralBill.length-1){
						dataList.push({
							month: month,
							billList: integrallBill
						})
					}
				}
				
				this.billList = dataList;
				this.filterBillsByType(); // 初始化时进行筛选
			},
			
			// 根据选中的类型筛选账单数据
			filterBillsByType() {
				if (!this.billList) {
					this.filteredBillList = [];
					return;
				}
				
				// 如果选择"全部收益"，直接使用原始数据
				if (this.selectedTypeId === 0) {
					this.filteredBillList = this.billList;
					return;
				}
				
				// 筛选出符合选中类型的数据
				const filtered = [];
				this.billList.forEach(monthGroup => {
					// 筛选当月中符合类型的记录
					const filteredItems = monthGroup.billList.filter(
						item => item.type === this.selectedTypeId
					);
					
					// 如果该月有符合条件的记录，则保留该月分组
					if (filteredItems.length > 0) {
						filtered.push({
							month: monthGroup.month,
							billList: filteredItems
						});
					}
				});
				
				this.filteredBillList = filtered;
			},
			
			// 处理类型选择变化
			handleTypeChange(type) {
				this.selectedTypeId = type.value;
				this.showTypeSelect = false; // 关闭下拉框
				this.filterBillsByType(); // 重新筛选数据
			}
		},
		
		onLoad() {
			this.uid = Cache.get(UID, true)
		},
		
		onShow() {
			this.getfindIntegralBill()
		}
	}
</script>

<style lang="less">
	/* 新增的下拉框样式 */
	.filter-container {
		background-color: white;
		padding: 0 4%;
		border-bottom: 1px solid #F6F7F8;
		
		.filter-select {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			font-size: 34rpx;
			
			.arrow-icon {
				width: 24rpx;
				height: 24rpx;
				transition: transform 0.3s ease;
			}
		}
		
		.type-options {
			position: absolute;
			top: 100rpx;
			left: 0;
			right: 0;
			background-color: white;
			z-index: 999;
			border-bottom: 1px solid #F6F7F8;
			
			.option-item {
				height: 90rpx;
				line-height: 90rpx;
				padding: 0 4%;
				border-bottom: 1px solid #F6F7F8;
				font-size: 32rpx;
				
				&:last-child {
					border-bottom: none;
				}
				
				&:active {
					background-color: #F9F9F9;
				}
			}
		}
	}

	.image_4_border{
		display: flex;
		justify-content: center;
		align-items: center;
		
		.image_4{
			width: 39.86rpx;
			height: 41.67rpx;
		}
	}

	.wode-last-text {
		width: 92%;
		padding: 30rpx 0 30rpx 0;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #F6F7F8;
	}
	
	.wode-last-text2 {
		display: flex;
		justify-content: space-between;
		width: 90%;
		
		text{
			// font-weight: 550;
		}
	}
	
	.Arrary {
		width: 92%;
		margin: 0px auto;
		// height: 500px;
		// background-color: white;
	}

	.Arrary_center {
		width: 100%;
		min-height: 215.94rpx;
		height: auto;
		margin-top: 20px;
		background-color: white;
		border-radius: 20rpx;
	}

	.jifen-image {
		background-image: url('https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/png/beijing%281%29.png');
		width: 210.14rpx;
		height: 139.17rpx;
		background-repeat: no-repeat;
		border-radius: 20px;
		jupadding: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	
		text {
			margin-left: 30rpx;
		}
	}

	.jifen-image2 {
		background-image: url('https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/png/beijing%282%29.png');
		width: 210.14rpx;
		height: 139.17rpx;
		background-repeat: no-repeat;
		border-radius: 20px;
		jupadding: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		text {
			margin-left: 30rpx;
		}
	}

	.jifen-image3 {
		background-image: url('https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/png/beijing%283%29.png');
		width: 210.14rpx;
		height: 139.17rpx;
		background-repeat: no-repeat;
		border-radius: 20px;
		jupadding: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		text {
			margin-left: 30rpx;
		}
	}
</style>